<template>
	<view class="cards-container">
		<!-- 顶部标签页 -->
		<view class="tabs-container">
			<view class="tabs">
				<view class="tab-item" :class="{ active: activeTab === index }" v-for="(tab, index) in tabs"
					:key="index" @click="switchTab(tab,index)">
					<text class="tab-text">{{ tab.name }}</text>
					<view class="tab-underline" v-if="activeTab === index"></view>
				</view>
			</view>
		</view>

		<!-- 卡片网格 -->
		<view class="cards-grid">
			<view class="card-item" v-for="(card, index) in filteredCards" :key="card.id"
				@click="viewCardDetails(card)">
				<!-- 卡片背景 -->
				<view class="card-background">
					<view class="card-status">
						<text class="status-text">已就绪 {{ card.leftCount }}/{{ card.total }} 份</text>
					</view>
					<view class="card-number">
						<text class="number-text">{{ card.giftName }}</text>
					</view>
					<!-- 装饰性波浪 -->
					<view class="wave-decoration"></view>
				</view>

				<!-- 卡片信息 -->
				<view class="card-info">
					<text class="nickname">昵称：{{ card.nickname }}</text>
					<view class="detail-btn" @click.stop="editCard(card)">
						查看详情
					</view>
				</view>
			</view>
			<view class="add-address" @click="addAddress">
				<text class="add-text">添加收货地址</text>
			</view>
		</view>

		<!-- 底部操作区 -->
		<!-- <view class="bottom-actions">

			<button class="logout-btn" @click="logout">导出</button>
		</view> -->


	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js';
	export default {
		data() {
			return {
				activeTab: 0,
				tabs: [{
						name: '全部',
						type: 'all'
					},
					{
						name: '好大哥',
						type: 'brother'
					},
					{
						name: '好大姐',
						type: 'sister'
					}
				],
				cards: [],
				showDetailModal: false,
				selectedCard: {}
			}
		},
		onLoad() {
			this.getWarmingList();
		},
		computed: {
			filteredCards() {
				if (this.activeTab === 0) {
					return this.cards
				}
				const currentRole = this.tabs[this.activeTab].name // 例如 “好大哥” 或 “好大姐”
				return this.cards.filter(card => card.role === currentRole)
			}
		},
		methods: {
			async getWarmingList(name) {
				console.log(name, 'name');
				try {
					const res = await request({
						url: '/api/warming/list',
						method: 'GET',
						data: {
							page: 1,
							pageSize: 10,
							role: name ? name : '全部'
						}
					});
					this.cards = res.data
					console.log('情感加温列表：', res.data);
				} catch (err) {
					console.error('请求失败：', err);
				}
			},
			switchTab(tab, index) {
				this.activeTab = index
				this.getWarmingList(tab.name ? tab.name : '全部')
			},

			viewCardDetails(card) {
				console.log('查看卡片:', card.name)
				// 可以跳转到卡片详情页
			},

			viewDetails(card) {
				this.selectedCard = card
				this.showDetailModal = true
			},

			closeDetailModal() {
				this.showDetailModal = false
				this.selectedCard = {}
			},

			editCard() {
				// @ts-ignore
				uni.navigateTo({
					url: `/pagesA/sendDetail/sendDetail?cardId=${this.selectedCard.id}`
				})
				this.closeDetailModal()
			},

			addAddress() {
				// @ts-ignore
				uni.navigateTo({
					url: '/pagesA/editAddress/editAddress'
				})
			},

			logout() {
				// @ts-ignore
				uni.showModal({
					title: '确认导出',
					content: '确定要导出吗？',
					success: (res) => {

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.cards-container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.tabs-container {
		background-color: #fff;
		padding: 0 20px;
		border-bottom: 1px solid #eee;

		.tabs {
			display: flex;

			.tab-item {
				flex: 1;
				text-align: center;
				padding: 15px 0;
				position: relative;

				.tab-text {
					font-size: 16px;
					color: #666;
					transition: color 0.3s;
				}

				.tab-underline {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 30px;
					height: 2px;
					background-color: #8b5cf6;
				}

				&.active .tab-text {
					color: #8b5cf6;
					font-weight: bold;
				}
			}
		}
	}

	.cards-grid {
		padding: 20px;
		display: flex;
		flex-wrap: wrap;
		gap: 15px;

		.card-item {
			width: calc(50% - 7.5px);
			background-color: #fff;
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

			.card-background {
				height: 120px;
				background: linear-gradient(135deg, #8b5cf6, #7c3aed, #6d28d9);
				position: relative;
				overflow: hidden;

				.card-status {
					position: absolute;
					top: 14rpx;
					right: 0px;
					background: #8460DA;
					border-radius: 15rpx 0rpx 0rpx 15rpx;
					padding: 5rpx 6rpx 3rpx 10rpx;

					.status-text {
						font-size: 12px;
						color: rgba(255, 255, 255, 0.9);
					}
				}

				.card-number {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);

					.number-text {
						font-size: 24px;
						font-weight: bold;
						color: white;
					}
				}

				.wave-decoration {
					position: absolute;
					bottom: -10px;
					left: -10px;
					right: -10px;
					height: 30px;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 50% 50% 0 0;

					&::before {
						content: '';
						position: absolute;
						top: 5px;
						left: 20px;
						right: 20px;
						height: 20px;
						background: rgba(255, 255, 255, 0.05);
						border-radius: 50% 50% 0 0;
					}
				}
			}

			.card-info {
				padding: 15px;

				.nickname {
					display: block;
					font-size: 14px;
					color: #333;
					margin-bottom: 10px;
				}

				.detail-btn {
					width: 141rpx;
					height: 41rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 1px solid #5A2F83;
					font-family: Source Han Sans SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #5A2F83;
					margin-left: 134rpx;
					text-align: center;
				}
			}
		}
	}

	.add-address {
		width: 710rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.bottom-actions {
		position: fixed;
		bottom: 11rpx;
		right: 18rpx;

		.logout-btn {
			width: 120rpx;
			height: 120rpx;
			line-height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 13rpx 0rpx rgba(120, 119, 121, 0.4);
			border-radius: 50%;
			font-family: Source Han Sans SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #5A2F83;
		}
	}

	.detail-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;

		.modal-content {
			background-color: #fff;
			border-radius: 12px;
			margin: 20px;
			max-width: 350px;
			width: 100%;

			.modal-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20px;
				border-bottom: 1px solid #eee;

				.modal-title {
					font-size: 18px;
					font-weight: bold;
					color: #333;
				}

				.close-btn {
					font-size: 24px;
					color: #999;
					cursor: pointer;
				}
			}

			.modal-body {
				padding: 20px;

				.detail-item {
					display: flex;
					margin-bottom: 15px;

					&:last-child {
						margin-bottom: 0;
					}

					.detail-label {
						width: 80px;
						font-size: 14px;
						color: #666;
					}

					.detail-value {
						flex: 1;
						font-size: 14px;
						color: #333;
					}
				}
			}

			.modal-footer {
				padding: 20px;
				border-top: 1px solid #eee;
				display: flex;
				gap: 10px;

				.modal-btn {
					flex: 1;
					padding: 12px;
					border-radius: 6px;
					font-size: 14px;
					border: 1px solid #ddd;
					background-color: #fff;
					color: #666;

					&.primary {
						background-color: #8b5cf6;
						color: white;
						border-color: #8b5cf6;
					}
				}
			}
		}
	}

	/* 为底部操作区留出空间 */
	.cards-grid {
		padding-bottom: 100px;
	}
</style>